<template>
  <div class="order-detail">
    <!-- 订单详情 -->
    <el-drawer
      title="订单详情"
      :visible.sync="$store.state.order.showOrderDetail"
      direction="rtl"
      size="70%"
      @close="btnCancle"
      @open="onOpen"
    >
      <div class="detail-base">
        <h3>基础详情</h3>
        <div class="detail-base-1">
          <span>订单号：{{ orderData.id }}</span>
          <span>订单时间：{{ orderData.ordr_time }}</span>
          <span>状态：{{ orderData.sts }}</span>
        </div>
        <div style="padding-bottom:20px">
          <span>商铺名称：{{ orderData.shop_name }}</span>
        </div>
        <div class="detail-base-2">
          <span>选购商品表:</span>
          <el-table
            :data="tableData1"
            style="width: 100%;margin-left:20px"
            height="250"
          >
            <el-table-column
              prop="id"
              label="商品编号"
              width="100"
            />
            <el-table-column
              prop="good_name"
              label="商品名称"
              width="100"
            />
            <el-table-column
              prop="shop_img"
              label="商品图片"
              width="100"
            />
            <el-table-column
              prop="cost_prc"
              label="商品单价"
              width="100"
            />
          </el-table>
        </div>
      </div>
      <div class="detail-base">
        <h3>配送信息</h3>
        <div class="detail-base-1">
          <span>配送方式：{{ orderData.delivery_meth }}</span>
          <span>收货地址：{{ orderData.delivery_addr }}</span>
        </div>
        <div class="detail-base-1" style="padding-bottom:20px">
          <span>联系人：{{ orderData.ctct_name }}</span>
          <span>电话：{{ orderData.ctct_tel }}</span>
        </div>
      </div>
      <div class="detail-base">
        <h3>费用统计</h3>
        <div class="detail-base-1">
          <span>包装：{{ orderData.pkg ?orderData.pkg:'无' }}</span>
          <span>活动优惠：{{ orderData.activity?orderData.activity:'无' }}</span>
        </div>
        <div class="detail-base-1" style="padding-bottom:20px">
          <span>优惠券：{{ orderData.coupon?orderData.coupon:'无' }}</span>
          <span>配送费：￥：{{ orderData.delivery_fee?orderData.delivery_fee:0 }}</span>
        </div>
        <div style="padding-bottom:20px">
          <span>合计：</span>
          <span style="color:red;">￥：{{ orderData.ordr_amt }}</span>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { getTheOrderOfName } from '@/api/order.js'
export default {
  data() {
    return {
      tableData1: [],
      ordr: {
        shop_name: '', // 商铺名(shop表)
        delivery_meth: '', // shop列表下配送方式有三种方式+一种不限制方式
        sts: '', // 状态
        delivery_addr: '', // 配送地址
        ctct_name: '', // 联系人
        ctct_tel: '', // 联系方式
        activity: '', // 活动优惠
        pkg: '', // 包装
        coupon: '', // 优惠券
        delivery_fee: '', // 配送费
        shoplist: [] // 选择商品
      },
      orderData: {}
    }
  },
  methods: {
    onOpen() {
      getTheOrderOfName(this.$store.state.order.orderId).then((res) => {
        console.log(res)
        this.tableData1 = res.data[0].shoplist
        this.orderData = res.data[0]
      }).catch((err) => {
        this.$message.error(err.message)
      })
    },
    btnCancle() {
      this.ordr = {
        shop_name: '', // 商铺名(shop表)
        delivery_meth: '', // shop列表下配送方式有三种方式+一种不限制方式
        sts: '', // 状态
        delivery_addr: '', // 配送地址
        ctct_name: '', // 联系人
        ctct_tel: '', // 联系方式
        activity: '', // 活动优惠
        pkg: '', // 包装
        coupon: '', // 优惠券
        delivery_fee: '', // 配送费
        shoplist: [] // 选择商品
      }
      this.$store.state.order.showOrderDetail = false
    }
  }
}
</script>
<style lang="scss" scoped>
.detail-base {
  border-top: 1px solid #e3e3e7;
  padding-left: 20px;
  padding-right: 20px;
  .detail-base-1 {
    display: flex;
    padding: 0 0 20px 0;
    span {
      flex: 1;
    }
  }
  .detail-base-2 {
    display: flex;
  }
}
::v-deep .el-drawer__body {
  overflow: auto;
}
</style>
